<template>
    <div>
        <el-select v-model="value" filterable placeholder="请选择" style="width: 400px;margin-right: 10px;">
            <el-option label="选择需要生成代码的表" value=""></el-option>
            <el-option v-for="item in list" :key="item.name" :label="item.name + ' - ' + item.remark" :value="item.name">
            </el-option>
        </el-select>

        <el-button v-if="$PowerAdd(userPower, currentPagePower)" type="primary" v-on:click="onCreate">生成代码</el-button>



        <div style="margin-top: 20px;">
            <el-button @click="copyCode1"  v-show="activeName=='a'" class="lbtn1" type="primary">复制代码</el-button>
            <el-button @click="copyCode2"  v-show="activeName=='b'" class="lbtn2" type="primary">复制代码</el-button>
            <el-button @click="copyCode3"  v-show="activeName=='c'" class="lbtn3" type="primary">复制代码</el-button>
        </div>
        <div style="margin-top: 10px;">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="a" label="前端VUE代码">
                    <div style="height: calc(100vh - 280px);overflow: auto;">

                        <template v-if="code1 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code1">
                                {{ code1 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="b" label="前端接口代码">
                    <div style="height: calc(100vh - 280px);overflow: auto;">

                        <template v-if="code2 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code2">
                                {{ code2 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="c" label="后端接口代码(控制器)">
                    <div style="height: calc(100vh - 280px);overflow: auto;">

                        <template v-if="code3 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code3">
                                {{ code3 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>
 
<script>
import { GetCodeCreateList, CodeCreate } from '@/service/systemapi';
import Clipboard from 'clipboard';
export default {
    name: "codecreate",
    data() {
        return {
            activeName: "a",
            userPower: '',
            currentPagePower: '',
            list: [],
            value: '',
            code1: '',
            code2: '',
            code3: '',
        };
    },
    created() {
        this.currentPagePower = this.$route.query.powercode;
        this.userPower = localStorage.getItem("userPower");
        this.InitData();
    },
    mounted() {
        this.$nextTick(() => {
            new Clipboard('.lbtn1', {
                target: () => this.$refs.code1,
            });
            new Clipboard('.lbtn2', {
                target: () => this.$refs.code2,
            });
            new Clipboard('.lbtn3', {
                target: () => this.$refs.code3,
            });
        });
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        copyCode1() {

        },
        copyCode2() {

        },
        copyCode3() {

        },
        //初始化
        InitData() {

            if (this.$PowerSelect(this.userPower, this.currentPagePower)) {
                this.getList();
            }

        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;

            GetCodeCreateList().then(res => {

                if (res.data != undefined) {
                    that.list = res.data;
                }
                that.closeLoading();
            }).catch(err => {
                this.$message.error("数据请求异常");
                that.closeLoading();
            })

        },
        //生成代码
        onCreate() {

            if (this.value == '') {
                this.$message.error("请选择需要生成代码的表");

                return false;
            }
            console.log("当前生成代码的表", this.value)

            var that = this;
            that.openLoading();
            CodeCreate(this.value).then(res => {
                console.log("生成代码", res)
                that.closeLoading();
                console.log(res);
                if (res.success) {
                    that.code1 = res.data.code1;
                    that.code2 = res.data.code2;
                    that.code3 = res.data.code3;
                    that.$message({ message: "生成成功", type: "success" });
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("生成失败");
                that.closeLoading();
            })
        }
    },
};
</script>
 
<style scoped ang="scss" ></style>